<template>
  <div class="drag" ref="dragDiv">
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmWords}}</div>
    <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}"
         class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        beginClientX: 0,           /*距离屏幕左端距离*/
        mouseMoveStatus: false,     /*触发拖动状态  判断*/
        maxwidth: '',               /*拖动最大宽度，依据滑块宽度算出来的*/
        confirmWords: '拖动滑块验证',   /*滑块文字*/
        confirmSuccess: false           /*验证成功判断*/
      }
    },
    methods: {
      mousedownFn: function(e) {
        if (!this.confirmSuccess) {
          e.preventDefault && e.preventDefault()   //阻止文字选中等 浏览器默认事件
          this.mouseMoveStatus = true
          this.beginClientX = e.clientX
        }
      },//mousedoen 事件
      successFunction() {
        this.confirmSuccess = true
        this.confirmWords = '验证通过'
        if (window.addEventListener) {
          document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)
          document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)
        } else {
          document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {
          })
        }
        document.getElementsByClassName('drag_text')[0].style.color = '#fff'
        document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'
        // 调用父组件监听函数
        this.$emit('successVerify')
      },//验证成功函数
      mouseMoveFn(e) {
        if (this.mouseMoveStatus) {
          let width = e.clientX - this.beginClientX
          if (width > 0 && width <= this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left = width + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
          } else if (width > this.maxwidth) {
            this.successFunction()
          }
        }
      },//mousemove事件
      moseUpFn(e) {
        this.mouseMoveStatus = false
        let width = e.clientX - this.beginClientX
        if (width < this.maxwidth) {
          document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
          document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
        }
      }//mouseup事件
    },
    mounted() {
      this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
      document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
      document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
    }
  }
</script>

<style scoped>
  .drag {
    position: relative;
    background-color: #e8e8e8;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .handler {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    cursor: move;
  }

  .handler_bg {
    background: #fff url("") no-repeat center;
  }

  .handler_ok_bg {
    background: #fff url("") no-repeat center;
  }

  .drag_bg {
    background-color: #7ac23c;
    height: 40px;
    width: 0px;
  }

  .drag_text {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
  }
</style>
